<template>
  <div>
    <a-row :gutter="[48, 32]">
      <template v-for="(item, index) in growCardLists" :key="index">
        <Authority >
          <a-col :span="8">
            <Card
              size="small"
              :loading="loading"
              :title="index + 1 + '>>' + item.title"
              class="cursor-pointer"
              :canExpan="false"
              @click="handleImport(item)"
            >
              <formImport @register="registerImportModal" @success="handleSuccess" />
              <div class="py-4 px-4 flex justify-between">
                <span>{{ item.value }}</span>
                <Icon :icon="item.icon" :size="60" />
              </div>
              <div class="p-2 px-4 flex justify-between">
                <span>点击我</span>
                <!-- <CountTo prefix="共" :startVal="1" :endVal="item.total" /> -->
              </div>
            </Card>
          </a-col>
        </Authority>
      </template>
    </a-row>
  </div>
</template>
<script lang="ts">
  import { Authority } from '/@/components/Authority';
  import { defineComponent } from 'vue';
  export default defineComponent({
    components: { Authority },
  });
</script>
<script lang="ts" setup>
  import { CountTo } from '/@/components/CountTo/index';
  import { Icon } from '/@/components/Icon';
  import { Card } from 'ant-design-vue';
  import { growCardLists } from './data';
  // import { useGo } from '/@/hooks/web/usePage';
  import { useModal } from '/@/components/Modal';
  import formImport from './formImport.vue';
  import { useRouter } from 'vue-router'; //页面跳转

  const [registerImportModal, { openModal: importModal }] = useModal();
  defineProps({
    loading: {
      type: Boolean,
    },
  });


  const router = useRouter();
  // 通过定义一个方法，使用router进行跳转，这里后面的123是路由传参，不传可以不加

  // 编程
  // 外协发料
  // 外协收料

  function handleImport(_item: any) {
    importModal(true, { url: _item.url, title: _item.title, type: _item.type });
  }
  function handleSuccess() {
    // reload();
  }
</script>
<style>
  .ant-card-head-title {
    font-size: larger;
    font-weight: bold;
  }
  .md:flex {
    margin-bottom: 20px;
    background-color: aqua;
  }
  .\!md\:mt-0 {
    margin-top: 20px !important;
  }
</style>
